<template>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in carouselchartData" key="item.id"><img :src="item.pic_url"></van-swipe-item>
    </van-swipe>

    <Goods :goodsList="hotGoods" title="热卖商品"></Goods>
    <Goods :goodsList="newGoods" title="最新商品"></Goods>
</template>

<script setup>
//获取轮播图数据
import { ref, onMounted } from 'vue'
import { getCarouselChartData, getGoodList } from '@/api/home.js'

const carouselchartData = ref([])
const hotGoods = ref([])
const newGoods = ref([])
//生命周期 组件挂载完成
onMounted(() => {
    getCarouselChartData({ limit: '10', page: '1' }).then((res) => {
        carouselchartData.value = res.data.list
    }),
        //热卖商品
        getGoodList({ limit: '10', page: '1', sort: 'sale' }).then((res) => {
            hotGoods.value = res.data.list
        })
    //最新商品
    getGoodList({ limit: '10', page: '1', sort: 'recent' }).then((res) => {
        newGoods.value = res.data.list
    })
})
</script>

<style lang="scss">
.my-swipe .van-swipe-item {

    // color: #fff;
    // font-size: 20px;
    // line-height: 150px;
    // text-align: center;
    // background-color: #39a9ed;
    img {
        width: 100%
    }
}
</style>